% rebase('layout.tpl', title=title, year=year, jsfiles=['jquery-1.10.2.min.js', 'vue.min.js'])

<div class="btn-group">
    <a href="/plan/create" class="btn btn-default">Create</a>
    <a href="/batch/plan/create" class="btn btn-default">Batch Create</a>
    <!-- <a href="/batch/plan/edit" class="btn btn-default">Batch Edit</a> -->
    <!-- <a href="/batch/plan/delete" class="btn btn-default">Batch Delete</a> -->
    <a href="/log/summary" class="btn btn-default">Logs Summary</a>
    <a href="/log/download" class="btn btn-default">Download Logs</a>
</div>

<hr/>
<div class="container" id="app">
    <div>Last update: ${ timestamp }</div>
    <div>Total clients: ${ plan_list.length }</div>
    <table class="table table-condensed table-hover">
        <tr>
            <th>Rack</th>
            <th>Location</th>
            <th>MAC</th>
            <th>Finished</th>
            <th>Count/Cycle</th>
            <th>Progress</th>
        </tr>
        <tr v-for="plan in plan_list">
            <td>
                ${ plan.rack }</a>
            </td>
            <td>
                ${ plan.location }</a>
            </td>
            <td>
                <a v-bind:href="'/plan/view/' + plan.mac">${ plan.mac }</a>
            </td>
            <td>
                <span v-bind:class="plan.finished ? 'text-success' : 'text-warning'">${ plan.finished ? '' : 'Not' } Finished</span>
            </td>
            <td>
                <span>${plan.progress_text}</span>
            </td>
            <td>
                <div class="progress" style="margin-bottom: 0">
                    <div class="progress-bar" role="progressbar" v-bind:style="{width: plan.progress_value + '%'}" v-bind:aria-valuenow="plan.progress_value"
                        aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </td>
        </tr>
    </table>
</div>

<script>
    var data = {
        plan_list: [],
        timestamp: null
    }
    var app = new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data: data,
        computed: {
        },
        methods: {
        }
    });

    function set_plan_list(plan_list) {
        var d = new Date();
        app.timestamp = d.toString();
        while (app.plan_list.length > 0) {
            app.plan_list.pop();
        }
        for (var i = 0; i < plan_list.length; i++) {
            app.plan_list.push(plan_list[i]);
        }
    }
    function update_status() {
        $.ajax({
            url: "/ajax/plan",
            //     data: {
            //         mac: '08:00:27:df:0e:00,08:00:27:00:4d:b6'
            //     },
            success: function (result) {
                // console.log('update');
                set_plan_list(result.plan_list);
            }
        });
    }
    update_status();
    var timer = setInterval(update_status, 2000);
</script>